import { createStore } from "vuex";
import { reqColumnsList, reqGetUser } from "../api/main";
export interface storeType {
  columnListData?: columnType;
  useData?: userDataType;
  loading: boolean;
}

const mirroringUser = (
  data: userDataType | undefined,
  keyName: keyof userDataType["data"]
) => {
  if (data && data.data[keyName]) {
    return data.data[keyName];
  } else {
    return "";
  }
};

export interface userDataType {
  code: number;
  msg: string;
  data: {
    _id: string;
    email: string;
    nickName: string;
    description: string;
    avatar: {
      url: string;
      _id: string;
    };
    column: string;
    createdAt: string;
  };
}

export interface columnType {
  code: number;
  msg: string;
  data: {
    count: number;
    pageSize: number;
    currentPage: number;
    list: Array<{
      _id: string;
      title: string;
      description: string;
      avatar?: {
        _id: string;
        url: string;
        createdAt: string;
      };
      author: string;
      createdAt: string;
    }>;
  };
}

export interface lazyToRefresh {}

export default createStore<storeType>({
  state: { loading: false },
  mutations: {
    CHANGECOLUMNLIST(state, data) {
      let oldList: columnType["data"]["list"] = [];
      const { columnListData } = state;
      if (columnListData) {
        oldList = columnListData.data.list;
      }
      data.data.list = oldList.concat(data.data.list);
      state.columnListData = { ...data };
    },
    SETUSERDATA(state, data) {
      state.useData = data;
    },
    SETLOADING(state, data) {
      state.loading = data;
    },
  },
  actions: {
    async getColounList({ commit }, page: number) {
      commit("CHANGECOLUMNLIST", await reqColumnsList(page));
    },
    async getUsetData({ commit }) {
      try {
        commit("SETUSERDATA", await reqGetUser());
        return true;
      } catch {
        commit("SETUSERDATA", "");
        return false;
      }
    },
  },
  getters: {
    columnList(state) {
      return state.columnListData ? state.columnListData.data.list : [];
    },
    columnListPage(state) {
      return state.columnListData ? state.columnListData.data : false;
    },
    userName(state) {
      return mirroringUser(state.useData, "nickName");
    },
    userID(state) {
      return mirroringUser(state.useData, "_id");
    },
    colomId(state) {
      return mirroringUser(state.useData, "column");
    },
    userEmil(state) {
      return mirroringUser(state.useData, "email");
    },
    userAvatar(state) {
      return mirroringUser(state.useData, "avatar");
    },
    userDescription(state) {
      return mirroringUser(state.useData, "description");
    },
    columnTitel(state) {
      return (id: string) => {
        if (state.columnListData) {
          return state.columnListData?.data.list.find(
            (item) => item._id === id
          );
        } else {
          return {};
        }
      };
    },
  },
});
